<script setup>
import {Avatar,CircleCheck,User,DataLine} from "@element-plus/icons-vue";
import { ref, onMounted, onBeforeUnmount } from 'vue'
//导入echarts
import *  as echarts from 'echarts'

//页面挂载时初始化图标
onMounted(()=>{
  initChartBar(),initChartPie()
})

const barRef = ref(null)
const pieRef = ref(null)


//初始化柱形图
const initChartBar = () => {
  let myEcharts = echarts.init(barRef.value);
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '各专业报到人数'
    },
    tooltip: {},
    legend: {
      data: ['人数']
    },
    xAxis: {
      data: ['软件工程','计算机科学','平面设计', '人工智能','机器人工程','供应链管理'],
      axisLabel: {
        interval: 0,
        rotate: 30
      },
    },
    yAxis: {},
    series: [
      {
        name: '人数',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }
    ]
  };
  myEcharts.setOption(option)
}

//初始化饼状图
const initChartPie = () => {
 let  myEcharts1= echarts.init(pieRef.value);
  var option;

  option = {
    title: {
      text: '新生来源地区分布',
      subtext: '人数',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '人数',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '四川' },
          { value: 735, name: '重庆' },
          { value: 580, name: '广东' },
          { value: 484, name: '云南' },
          { value: 300, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };


  myEcharts1.setOption(option)
}
</script>

<template>
  <div class="dashboard">
    <div class="item">
      <p class="title">总新生人数</p>
      <p class="number">2400</p>
      <div class="icon-box">
        <el-icon color="#fff"size="50"style="margin-top:12px "><Avatar /></el-icon>
      </div>
    </div>
    <div class="item">
      <p class="title">已报到人数</p>
      <p class="number">500</p>
      <div class="icon-box">
        <el-icon color="#fff"size="50"style="margin-top:12px "><CircleCheck /></el-icon>
      </div>
    </div>
    <div class="item">
      <p class="title">未报到人数</p>
      <p class="number">1900</p>
      <div class="icon-box">
        <el-icon color="#fff"size="50"style="margin-top:12px "><User /></el-icon>
      </div>
    </div>
    <div class="item">
      <p class="title">报到率</p>
      <p class="number">20%</p>
      <div class="icon-box">
        <el-icon color="#fff"size="50"style="margin-top:12px "><DataLine /></el-icon>
      </div>
    </div>
  </div>

  <div class="chart-box">
    <div ref="barRef" class="chart-item">

    </div>
    <div ref="pieRef" class ="chart-item">

    </div>
  </div>
</template>

<style scoped>
.dashboard {
  display: flex;
  gap: 20px;
  width: 96%;
  padding: 20px;
}
.item{
  width: 220px;
  height: 120px;
  flex-wrap: nowrap;
  flex:1;
  margin: 20px;
  border-radius: 10px;
}
.item:first-child{
  background-color: rgba(0,204,204,1);
}
.item:nth-child(2){
  background-color: rgba(51,204,153,1);
}
.item:nth-child(3){
  background-color: rgba(64,128,255,1);
}
.item:nth-child(4){
  background-color: rgba(255,102,102,1);
}
.title{
  color: white;
  text-align: left;
  margin-left: 20px;
}
.number{
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  margin-left: 20px;
  margin-top: -10px;
}
.icon-box{
  width: 80px;
  height: 80px;
  background-color: rgba(255,255,255,0.3);
  float: right;
  margin-top: -80px;
  border-radius: 50%;
  margin-right: 30px;

}
.chart-box {
  display: flex;
  gap: 20px;               /* 间距 */
  padding: 20px;           /* 内边距，让图不要贴边 */
  box-sizing: border-box;
  height: 400px;
}

.chart-item {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* 轻微阴影，更立体 */
}
</style>